<template>
    <div class="edit-container-home">
        <div class="left">
            <!-- <ColorPicker v-model="color1" @on-change="colorChange" alpha />
           
            </div> -->
            <!-- <Button @click="isShow = !isShow">隐藏画布</Button> -->
            <imgEditLeft
                @addText="addText"
                @addImg="addImg"
                @setBgColor="colorChange"
                @addIconImg="addIconImg"
                @addBgImg="addBgImg"
            />
            <!-- <div class="test">文字字体 IMG</div>
            <div class="test2">文字字体</div> -->
        </div>
        <div class="center">
            <div class="canvas">
                <canvasIndex
                    v-if="isShow"
                    ref="canvasIndex"
                    @itemClickHandler="itemClickHandler"
                />
            </div>
        </div>
        <div class="right">
            <Button @click="save">保存</Button>
            <!-- <Button @click="editWidth">测试修改画布</Button> -->
            <imgEditRight
                ref="canvasRight"
                @itemChange="itemChange"
                @setIconColor="setIconColor"
                @setZIndex="setZIndex"
                @deleteDom="deleteDom"
                @copyDom="copyDom"
                @canDragDom="canDragDom"
                @rotateZChange="rotateZChange"
                @fontOpacityChange="fontOpacityChange"
                @setTextAlgin="setTextAlgin"
                @setTextAlginTop="setTextAlginTop"
                @setTextFontWeight="setTextFontWeight"
                @setTextFontStyle="setTextFontStyle"
                @setTextDecoration="setTextDecoration"
                @borderRadiusChange="borderRadiusChange"
            />
        </div>
        <div class="demos"></div>
    </div>
</template>

<script>
import canvasIndex from "./canvasIndex.vue";
// import imgEditData from "./imgEditData";
import imgEditLeft from "./imgEditLeft.vue";
import imgEditRight from "./ImgEditRight.vue";
import axios from "axios";

export default {
    components: {
        canvasIndex,
        imgEditLeft,
        imgEditRight,
    },
    data() {
        return {
            color1: "rgba(255,255,255,0)",
            isShow: true,
        };
    },
    created() {
        this.errVal = false;
    },
    mounted() {},
    methods: {
        save() {
            this.$refs.canvasIndex.save((url) => {
                const file = this.base64ToFile(url, "文件名");
                console.log(file);
                let conf = {
                    method: "post",
                    baseURL: "www.demoTest.com",
                    headers: {
                        "Content-Type": "application/json",
                        "X-SessionId": "1232131231223",
                    },
                    timeout: 60000,
                };
                const formData = new FormData();
                formData.append("ft", 1);
                formData.append("file", file);
                axios
                    .post(`${conf.url}`, formData, conf)
                    .then((res) => {})
                    .then((err) => {
                        console.log(err);
                    });
            });
        },
        base64ToFile(url, fileName) {
            let arr = url.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            // suffix是该文件的后缀
            let suffix = mime.split("/")[1];
            // atob 对经过 base-64 编码的字符串进行解码
            let bstr = atob(arr[1]);
            // n 是解码后的长度
            let n = bstr.length;
            // Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
            let u8arr = new Uint8Array(n);
            // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
            // 第三个参数是 要放到文件中的内容的 MIME 类型
            return new File([u8arr], `${fileName}.${suffix}`, {
                type: mime,
            });
        },
        // 新增文本
        addText(sizeType) {
            let type = "text";
            if (sizeType == 2) {
                type = "text2";
            }
            this.$refs.canvasIndex.addText(type);
        },
        // 添加图片
        addImg(src) {
            this.$refs.canvasIndex.addImg(src);
        },
        // 添加图标类图片
        addIconImg(src) {
            this.$refs.canvasIndex.addImg(src, true);
        },
        // 添加背景类图片
        addBgImg(src) {
            this.$refs.canvasIndex.addBgImg(src);
        },
        // 修改宽度
        editWidth() {
            this.$refs.canvasIndex.setDom();
        },
        // 修改背景图片
        colorChange(val) {
            this.$refs.canvasIndex.setBgColor(val);
        },
        // 点击某个图层后修改
        itemClickHandler(val) {
            this.$refs.canvasRight.initData(val);
        },
        // 某个元素进行了宽高等修改
        itemChange(val) {
            this.$refs.canvasIndex.setItemVal(val);
        },
        // 图标类型进行颜色修正 { base64, id  }
        // base64 修改颜色后的图片，、
        // 进行颜色修改id
        setIconColor(obj) {
            this.$refs.canvasIndex.setIconColor(obj);
        },
        // 点击进行图层的上移下移
        setZIndex(obj) {
            this.$refs.canvasIndex.setZIndex(obj);
        },
        deleteDom(id) {
            this.$refs.canvasIndex.deleteDom(id);
        },
        copyDom(id) {
            this.$refs.canvasIndex.copyDom(id);
        },
        canDragDom({ type, id }) {
            this.$refs.canvasIndex.canDragDom({ type, id });
        },
        rotateZChange({ val, id }) {
            this.$refs.canvasIndex.rotateZChange({ val, id });
        },
        fontOpacityChange({ val, id }) {
            this.$refs.canvasIndex.fontOpacityChange({ val, id });
        },
        setTextAlgin({ val, id }) {
            this.$refs.canvasIndex.setTextAlgin({ val, id });
        },
        setTextAlginTop({ val, id }) {
            this.$refs.canvasIndex.setTextAlginTop({ val, id });
        },
        setTextFontWeight({ val, id }) {
            this.$refs.canvasIndex.setTextFontWeight({ val, id });
        },
        setTextFontStyle({ val, id }) {
            this.$refs.canvasIndex.setTextFontStyle({ val, id });
        },
        setTextDecoration({ val, id }) {
            this.$refs.canvasIndex.setTextDecoration({ val, id });
        },
        borderRadiusChange({ val, id }) {
            this.$refs.canvasIndex.borderRadiusChange({ val, id });
        },
    },
};
</script>

<style lang="less" scoped>
.edit-container-home {
    display: flex;
    width: 100%;
    height: 1000px;
    // .left {
    //     width: 100px;
    // }
    .center {
        flex: 1;
        min-height: 1000px;
        background: rgb(249, 249, 249);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1000px;
        overflow-x: auto;
        // margin: 0 50px;
        // .canvas {
        //     background: rgba(0, 0, 0, 0);
        // }
    }
    .right {
        width: 350px;
    }
}
</style>
